<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>23201013505-王子毓</title>
  <link rel="stylesheet" href="fonts/iconfont.css">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div class="user-wrap out">
    <div class="right">
      <span style="font-size: 12px; vertical-align: top;">会员码 <span style="font-size: 24px; margin-left: 0;"
          class="iconfont icon-qrcode"></span></span>
      <span class="iconfont icon-setting"></span>
      <span class="iconfont icon-l-msg"></span>
    </div>

    <div class="touxiang">
      <img src="images/u1.jpg" alt="">
      <div class="text">
        <p class="name">duang ~</p>
        <p>
          <span>小米ID 123813913</span>
          <span>勋章 2 枚</span>
        </p>
      </div>
    </div>


    <div class="qb">
      <div>
        <h3>0</h3>
        <p>米金</p>
      </div>
      <div>
        <h3>1</h3>
        <p>优惠券</p>
      </div>
      <div>
        <h3>0元</h3>
        <p>红包</p>
      </div>
      <div>
        <h3>20万元</h3>
        <p>最高额度</p>
      </div>
      <div>
        <img src="images/u2.jpg" alt="">
        <p>钱包</p>
      </div>
    </div>

    <div class="hy">
      <h4>小米FRIEND会员中心</h4>
      <img src="images/u3.jpg" alt="">

      <a href="#">查看权益</a>
    </div>

    <div class="hy2">
      <div class="tit">
        <img src="images/u4.jpg" alt="">
        Lv.2 山川会员

        <span>></span>
      </div>

      <div class="xq">
        <div>
          <div class="l">
            <p>米金星球</p>
            <p style="font-size: 13px; font-weight: normal; color: orange;">41米金待领取</p>
          </div>
          <img src="images/u5.jpg" alt="">
        </div>
        <div>
          <div class="l">
            <p>米金商城</p>
            <p style="font-size: 13px; font-weight: normal; color: orange;">买前先兑卷</p>
          </div>
          <img src="images/u6.jpg" alt="">
        </div>
      </div>
    </div>

    <div class="dd">
      <div class="dd1">
        <div>
          收藏 <span>1</span>
        </div>
        <div>
          足迹 <span>1</span>
        </div>
        <div>
          关注 <span>0</span>
        </div>
      </div>

      <div class="dd2">
        <div>
          <img src="images/u7.jpg" alt="">
          <p>待付款</p>
        </div>
        <div>
          <img src="images/u8.jpg" alt="">
          <p>待收货</p>
        </div>
        <div>
          <img src="images/u9.jpg" alt="">
          <p>待评价</p>
        </div>
        <div>
          <img src="images/u10.jpg" alt="">
          <p>退换/售后</p>
        </div>
        <div>
          <img src="images/u11.jpg" alt="">
          <p>全部订单</p>
        </div>
      </div>
    </div>

    <!-- 动态渲染 -->
    <div class="service" id="service">
      <h3>服务 <span>查看更多></span></h3>
      <ul>
      </ul>
    </div>

    <img src="images/u12.jpg" style="width: 100%; margin-top: 20px;" alt="">


  </div>



  <nav>
    <a href="index.html">
      <span class="iconfont icon-home"></span>
      首页
    </a>
    <a href="menu.html">
      <span class="iconfont icon-menu"></span>
      分类
    </a>
    <a href="service.html">
      <span class="iconfont icon-heart"></span>
      服务
    </a>
    <a href="#">
      <span class="iconfont icon-cart"></span>
      购物车
    </a>
    <a href="user.html" class="choose">
      <span class="iconfont icon-user"></span>
      我的
    </a>

  </nav>

</body>
<script src="js/service.js"></script>

</html>